<template>
	<navigatorComp title="祠堂真实信息" bgcColor="#0E0E0E" fontColor="#fff"></navigatorComp>
	<view class="content">
		<view class="rest">
			<view class="rest_con">
				<view class="left display_flex">
					<view class="star" v-if="!isDetail">*</view>
					祠堂地址:
				</view>
				<view class="right">
					<pickerAddress @change="changeAddress">
						<view class="display_flex">
							<view :class="['placeHolder', formData.hallPosAddress && 'value']">
								{{ formData.hallPosAddress || '请选择' }}
							</view>
							<image
								class="arrow_right"
								src="http://112.124.50.179:8888/imgs/home/arrow_right.png"
								mode=""
								v-if="!isDetail"
							></image>
						</view>
					</pickerAddress>
				</view>
			</view>

			<view class="rest_con">
				<view class="left display_flex">
					<view class="star" v-if="!isDetail">*</view>
					具体位置:
				</view>
				<view class="right">
					<up-input
						v-model="formData.hallPosLocation"
						inputAlign="right"
						fontSize="28rpx"
						border="none"
						placeholder="请输入祠堂具体地址"
						color="#fff"
						placeholderClass="plClass"
					></up-input>
				</view>
			</view>
			<view class="rest_con_upload" style="margin-bottom: 32rpx">
				<view class="left display_flex">
					<view class="star" v-if="!isDetail">*</view>
					祠堂图片:
				</view>
				<view class="right">
					<Upload
						ref="uploadRef"
						:list="formData.hallPosImages"
						@sendImgList="sendImgList"
						:addColor="'#999999'"
						:backgroundColor="'#666666'"
						:isMargin="false"
						:upLength="3"
						:formData="{
							fileType: 'image',
							fileDirType: 'hall'
						}"
						v-if="!isDetail"
					/>
					<view v-else class="real_imgList">
						<image
							@click="previewImg(formData.hallPosImages, item)"
							:src="item"
							mode=""
							v-for="(item, index) in formData.hallPosImages"
						></image>
					</view>
				</view>
			</view>
			<view class="rest_con_upload">
				<view class="left display_flex">
					<view class="star" v-if="!isDetail">*</view>
					祠记:
				</view>
				<view class="right">
					<view class="createTemple_inputBox_intro" v-if="!isDetail">
						<up-textarea
							disableDefaultPadding
							placeholderClass="placeholderClass"
							v-model.trim="formData.summarized"
							placeholder="请输入祠堂介绍"
							height="270rpx"
							border="none"
							maxlength="200"
							count
						></up-textarea>
					</view>
					<view v-else class="real_value">
						{{ formData.summarized }}
					</view>
				</view>
			</view>
		</view>
		<footerBtn
			v-if="!isDetail"
			name="确认"
			:btnDisable="btnDisable"
			@clickBtn="submit"
			bgcColor=""
		></footerBtn>
	</view>
</template>

<script setup>
import pickerAddress from '/components/picker/addressPicker.vue';
import footerBtn from '/components/footerBtn/index.vue';
import { onLoad } from '@dcloudio/uni-app';
import navigatorComp from '/components/navigator/index.vue';
import { ref, reactive, watchEffect } from 'vue';
import Upload from '@/components/upload/upload.vue';
import { previewImg } from '@/utils/previewImg.js';
import HomeApi from '@/API/home/index.js';
const homeApi = new HomeApi();
const btnDisable = ref(true);

onLoad((options) => {
	//获取祠堂真实信息
	getInfo();

	//是否是详情页
	isDetail.value = options.isDetail == 1 ? true : false;
});
const uploadRef = ref();
const formData = reactive({
	hallPosAddress: '',
	hallPosLocation: '',
	hallPosImages: [],
	summarized: '',
	hallId: uni.getStorageSync('hallId')
});
//是否可编辑
const isDetail = ref(false);

/**
 * 获取祠堂真实信息
 */
const getInfo = async () => {
	let res = await homeApi.getRealHall({ hallId: uni.getStorageSync('hallId') });
	if (res.code === 0) {
		console.log(res.data);
		formData.hallPosAddress = res.data.address;
		formData.hallPosLocation = res.data.location;
		formData.hallPosImages = res.data.images ? JSON.parse(res.data.images) : [];
		formData.summarized = res.data.summarized;
	}
};

const sendImgList = (e) => {
	formData.hallPosImages = e;
};
const submit = () => {
	homeApi
		.modifyHallPosApi({ ...formData, hallPosImages: JSON.stringify(formData.hallPosImages) })
		.then((res) => {
			if (res.code === 0) {
				uni.showToast({
					title: '编辑成功'
				});
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				}, 1000);
			}
		})
		.catch(() => {});
};
const changeAddress = (e) => {
	if (e.data && !isDetail.value) {
		formData.hallPosAddress = e.data.join('');
	}
};

watchEffect(() => {
	if (
		formData.hallPosAddress &&
		formData.hallPosLocation &&
		formData.hallPosImages.length > 0 &&
		formData.summarized
	) {
		btnDisable.value = false;
	} else {
		btnDisable.value = true;
	}
});
</script>

<style lang="scss">
page {
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
	background-color: #0e0e0e;
}

.arrow_right {
	width: 40rpx;
	height: 40rpx;
}

.placeHolder {
	font-weight: 400;
	font-size: 28rpx;
	color: #999999;
	line-height: 33rpx;
	text-align: right;
}

.value {
	color: #ffffff;
}

.plClass {
	font-size: 28rpx;
	color: #999999 !important;
}

.rest {
	margin-top: 32rpx;
	background-color: #292b2a;
	padding: 48rpx 32rpx;
	border-radius: 10rpx;

	.rest_con_upload {
		.left {
			margin-bottom: 32rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #ffffff;
			justify-content: flex-start;

			text {
				position: absolute;
				left: -16rpx;
				color: #ff6b77;
			}
		}
	}

	.rest_con {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 32rpx;
		position: relative;

		.left {
			font-weight: 400;
			font-size: 28rpx;
			color: #ffffff;

			text {
				position: absolute;
				left: -16rpx;
				color: #ff6b77;
			}
		}
	}

	.star {
		display: inline-block;
		color: #f56c6c;
		font-size: 20px;
	}
}

.upload {
	display: flex;
	flex-wrap: wrap;

	margin-right: -10rpx;

	.add {
		width: calc(33.33333% - 10rpx);
		margin-right: 10rpx;
		height: 216rpx;
		// margin-bottom: 16rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.upload_list {
		width: calc(33.33333% - 10rpx);
		margin-right: 10rpx;
		height: 216rpx;
		position: relative;

		.upload_img {
			width: 100%;
			height: 100%;
			border-radius: 12rpx;
		}

		.close {
			position: absolute;
			width: 40rpx;
			height: 40rpx;
			right: 0;
			top: 0;
		}
	}
}

.createTemple_inputBox_intro {
	width: 100%;
	margin-top: 24rpx;

	::v-deep .placeholderClass {
		font-weight: 400 !important;
		font-size: 28rpx !important;
		color: #999999 !important;
		line-height: 33rpx !important;
	}

	::v-deep .u-textarea {
		background: rgba(255, 255, 255, 0.1) !important;
		padding: 32rpx 32rpx 50rpx 32rpx !important;
		box-sizing: border-box !important;
		height: 400rpx !important;
	}

	::v-deep .u-textarea__count {
		background: none !important;
		bottom: 16rpx !important;
		right: 16rpx !important;
		font-size: 26rpx !important;
	}

	::v-deep .u-textarea__field {
		color: #fff !important;
		font-weight: 500 !important;
		text-align: justify !important;
	}
}

.real_imgList {
	display: flex;
	align-items: center;
	margin-right: -10rpx;

	image {
		flex-shrink: 0;
		width: calc(33.33333% - 10rpx);
		margin-right: 10rpx;
		height: 216rpx;
		background-color: #fff;
		border-radius: 16rpx;
	}
}

.real_value {
	font-weight: 400;
	font-size: 28rpx;
	color: #ffffff;
}
</style>
